<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cindy JS</title>
<link rel="stylesheet" href="../css/cindy.css">
<script type="text/javascript" src="../build/js/Cindy.js"></script>
<script type="text/javascript">
var gslp = [
  {name:"A1", type:"Free", pos:[0,0], color:[255, 0, 0]},
  {name:"A2", type:"Free", pos:[1,0], color:[255, 0, 0]},
  {name:"A3", type:"Free", pos:[1,1], color:[255, 0, 0]},
  {name:"A4", type:"Free", pos:[0,1], color:[255, 0, 0]},
  {name:"B1", type:"Free", pos:[2,0], color:[0, 128, 0]},
  {name:"B2", type:"Free", pos:[3,0], color:[0, 128, 0]},
  {name:"B3", type:"Free", pos:[3,1], color:[0, 128, 0]},
  {name:"B4", type:"Free", pos:[2,1], color:[0, 128, 0]},
  {name:"Tr0", type:"TrProjection", args:["A1","B1","A2","B2","A3","B3","A4","B4"]},
  {name:"P", type:"Free", pos:[0.5,0.5], color:[255, 0, 255]},
  {name:"Q", type:"TransformP", args:["Tr0","P"], color:[0, 255, 255]},
  {name:"S1", type:"Segment", args:["A1","A2"], color:[0,0,1]},
  {name:"S2", type:"Segment", args:["A2","A3"], color:[0,0,1]},
  {name:"S3", type:"Segment", args:["A3","A4"], color:[0,0,1]},
  {name:"S4", type:"Segment", args:["A4","A1"], color:[0,0,1]},
];
var n = 10;
for (var i = 0; i <= n; ++i) {
  gslp.push(
    {name:"X1_"+i, type:"PointOnSegment", args:["S1"], pos:[i/n, 0], visible:false},
    {name:"X2_"+i, type:"PointOnSegment", args:["S3"], pos:[i/n, 1], visible:false},
    {name:"Y1_"+i, type:"PointOnSegment", args:["S4"], pos:[0, i/n], visible:false},
    {name:"Y2_"+i, type:"PointOnSegment", args:["S2"], pos:[1, i/n], visible:false},
    {name:"X_"+i, type:"Segment", args:["X1_"+i, "X2_"+i]},
    {name:"Y_"+i, type:"Segment", args:["Y1_"+i, "Y2_"+i]},
    {name:"tX_"+i, type:"TransformSegment", args:["Tr0", "X_"+i]},
    {name:"tY_"+i, type:"TransformSegment", args:["Tr0", "Y_"+i]});
}
gslp.push({name:"Z", type:"PointOnSegment", args:["tY_"+(n>>1)], pos:[2.75,0.5], color:[1,1,0]});
CindyJS({
  canvasname:"CSCanvas",
  scripts:"cs*",
  geometry:gslp,
  transform:[{scale:3},{translate:[-1.5,-0.5]}]
});
</script>
<body>
<div id="CSCanvas" style="width:500px; height:500px; border:2px solid black"></div>
</body>
</html>
